<template>
  <div class="roundabout">
    <div class='roundabout-wrap' ref='RefRoundaboutWrap'>
      <canvas ref='RefCanvas' @transitionend="end"></canvas>
      <img
        class='start-btn'
        :class="{ disalbed: state.disabled }"
        src="@/assets/imgs/roundabout/startBtn.png"
        @click="start"
      />
    </div>
    <div class="choice_award">
      <van-radio-group v-model="state.winIdx">
        <van-radio style="margin: 10px 0;" name="5">谢谢参与</van-radio>
        <van-radio style="margin: 10px 0;" name="4">一等奖</van-radio>
        <van-radio style="margin: 10px 0;" name="3">二等奖</van-radio>
        <van-radio style="margin: 10px 0;" name="2">三等奖</van-radio>
        <van-radio style="margin: 10px 0;" name="1">四等奖</van-radio>
        <van-radio style="margin: 10px 0;" name="0">五等奖</van-radio>
      </van-radio-group>
      <van-button
        type="primary"
        block
        @click="open"
        :disabled="state.opening"
      >
        开奖
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { ref } from 'vue'
import { RoundAbout } from './RoundAbout'
import { reactive } from 'vue'

const RefRoundaboutWrap = ref()
const RefCanvas = ref()

let roundabout: RoundAbout

const state = reactive({
  disabled: false,
  winIdx: '5',
  opening: false,
})

const start = () => {
  roundabout.start()
  state.disabled = true
}

const end = () => {
  roundabout.end()
  state.disabled = false
  state.opening = false
}

const open = () => {
  if (state.opening || !state.disabled) return
  state.opening = true
  console.log('open', state.winIdx)
  roundabout.set.awardedIndex = +state.winIdx
  setTimeout(() => {
    roundabout.open()
  }, 50)
}

onMounted(() => {
  roundabout = new RoundAbout(RefRoundaboutWrap.value, RefCanvas.value, true)
})
</script>

<style lang="less" scoped>
.roundabout {
  .roundabout-wrap {
    width: 602px * 0.85;
    height: 602px * 0.85;
    position: relative;
    top: 20px;
    left: 20px;
    canvas {
      width: 100%;
      height: 100%;
    }
    .start-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      width: 20%;
      transform: translate(-50%, -60%);
      transition: all .5s;
      cursor: pointer;
    }
    .start-btn.disalbed {
      cursor: not-allowed;
    }
  }
  .choice_award {
    background-color: #fff;
    padding: 20px;
    position: relative;
    left: 30px;
    top: 30px;
    max-width: 375px * 2;
  }
}

@media (max-width: 480px)  {
  .roundabout {
    .roundabout-wrap {
      left: 0;
      top: 0;
    }
  }
}
</style>